<template>
  <div class="home">
    <div class="left">
      <div class="title" v-show="!state.isHelp">
        <div class="leftTitle">
          <div
            :class="state.activeTab == 1 ? 'titleItem active' : 'titleItem'"
            @click="titleClick(1)"
          >
            奖励记录
          </div>
          <div
            :class="state.activeTab == 2 ? 'titleItem active' : 'titleItem'"
            @click="titleClick(2)"
          >
            积分记录
          </div>
          <div
            :class="state.activeTab == 3 ? 'titleItem active' : 'titleItem'"
            @click="titleClick(3)"
          >
            任务记录
          </div>
          <div
            :class="state.activeTab == 4 ? 'titleItem active' : 'titleItem'"
            @click="titleClick(4)"
          >
            提现记录
          </div>
          <div
            :class="state.activeTab == 5 ? 'titleItem active' : 'titleItem'"
            @click="titleClick(5)"
          >
            兑换记录
        </div>
        <div class="rightTitle">
          <el-date-picker
            v-model="state.searchTime"
            type="daterange"
            style="width: 256px"
            start-placeholder="Start Date"
            end-placeholder="End Date"
            size="small"
            :default-value="[new Date(), new Date()]"
          >
          </el-date-picker>
          <el-button style="margin-left: 32px" size="small">重置</el-button>
          <el-button style="margin-right: 40px" type="primary" size="small"
            >查询</el-button
          >
        </div>
      </div>
      </div>
      <div class="content">
        <div class="contentArr">
          <el-table :data="state.tableData" style="width: 100%">
            <el-table-column prop="title" label="任务内容">
              <template #default="scope">
                <div style="color: #1890ffff">{{ scope.row.title }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <div>
                  {{ statusChange(scope.row.recStatus) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="detail" label="明细">
              <template #default="scope">
                <div v-if="scope.row.type == 1">
                  +{{ scope.row.money }}（余额）
                </div>
                <div v-if="scope.row.type == 2">
                  +{{ scope.row.integral }}（积分）
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ctime" label="时间"> </el-table-column>
          </el-table>
        </div>
        <div class="foot">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            v-model:current-page="state.currentPage"
            :page-sizes="[10, 20, 30, 40]"
            background
            :page-size="state.pageSize"
            layout=" prev, pager, next, sizes, jumper"
            :total="state.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// vue3 弃用了beforeCreate created
import {
  getCurrentInstance,
  ref,
  reactive,
  onMounted,
  onUpdated,
  onUnmounted,
  computed,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
const state = reactive({
  keyWords: "",
  isHelp: false,
  activeTab: 1,
  total: 1,
  pageSize: 10,
  searchTime: "",
  typeArr: {
    1: {
      type: 1,
      page: 1,
    },
    2: {
      type: 2,
      page: 1,
    },
    3: {
      type: 0,
      page: 1,
    },
  },
  currentPage: 1,
  tableData: [
    {
      taskContent: "#App内跳转微信小程序解决方案#",
      status: "进行中",
      detail: 0,
      ctime: "2021-7-29",
    },
    {
      taskContent: "#App内跳转微信小程序解决方案#",
      status: "已完成",
      detail: 100,
      ctime: "2021-7-29",
    },
  ],
});

export default {
  name: "baseRecord",
  components: {},
  // setup(props,ctx){
  setup(props, { emit }) {
    const  ctx  = getCurrentInstance();
    const _this = ctx.appContext.config.globalProperties;
    const router = useRouter();

    function goSeekHelpDetail() {
      router.push({
        name: "taskSeekHelpDetail",
        query: {
          id: "1",
        },
      });
    }
    function getNow() {
      let date = new Date();
      // console.log(date);
      return date;
    }

    //获取数据接口
    const getRecTask = (dataObj) => {
      let type = dataObj.type;
      let page = dataObj.page;
      let pageSize = state.pageSize;
      let params = {
        type,
        page,
        pageSize,
      };
      _this
        .$request({
          url: "?s=Learn.Task.GetRecTask",
          params,
        })
        .then((res) => {
          if (res.ret == 200) {
            state.tableData = res.data.data;
            state.total = res.data.total;
          }
        });
    };
    const titleClick = (index) => {
      state.activeTab = index;
      state.currentPage = 1;
      if (index >= 4) {
        ElMessage("暂未开放此模块~");
        return;
      }
      let params = state.typeArr[index];
      params.page = 1;
      getRecTask(params);
    };
    const statusChange = (recStatus) => {
      let status = {
        1: "进行中",
        2: "已完成",
        3: "已通过",
        4: "已反驳",
      };
      return status[recStatus];
    };
    //分页改变时
    const handleSizeChange = (val) => {
      state.pageSize = val;
      getRecTask(state.typeArr[state.activeTab]);
    };
    // 目标页改变时
    const handleCurrentChange = (val) => {
      let params = state.typeArr[state.activeTab];
      params.page = val;
      getRecTask(params);
    };
    onMounted(() => {
      state.activeTab = router.currentRoute.value.query.type;
      if (state.activeTab >= 4) {
        ElMessage("暂未开放此模块~");
        return;
      }else {
        getRecTask(state.typeArr[state.activeTab]);
      }
    });
    return {
      state,
      statusChange,
      titleClick,
      router,
      goSeekHelpDetail,
      getNow,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>
<style lang="scss" scoped>
/deep/.el-range-editor {
  position: relative;
}
/deep/.el-range__icon {
  position: absolute;
  right: 5%;
  top: 0;
}
.home {
  display: flex;
  width: 100%;
  height: calc(calc(100vh - 64px) - 40px - 70px);
  .left {
    flex: 2;
    background-color: #fff;
    height: 100%;
    margin-right: 24px;
    .title {
      display: flex;
      border-bottom: 1px solid #e9e9e9;
      box-sizing: border-box;
      align-items: center;
      justify-content: space-between;
      height: 55px;
      .leftTitle {
        flex: 1;
        display: flex;
        .active {
          // border-bottom: 2px solid #1890FFFF;
          color: #1890ffff !important;
          position: relative;
        }
        .active:after {
          content: "";
          position: absolute;
          bottom: -102%;
          left: 0%;
          height: 2px;
          width: 60px;
          background-color: #1890ffff;
        }
        .titleItem {
          flex: 1;
          margin-left: 32px;
          font-size: 16px;
          font-weight: 600;
          color: #888888ff;
          cursor: pointer;
        }
      }
      .rightTitle {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
    }

    .content {
      padding: 12px 23px 0;
      display: flex;
      flex-direction: column;
      height: calc(calc(100vh - 64px) - 40px - 70px - 55px);
      .contentArr {
        flex: 5;
        display: flex;
        flex-direction: column;
        .contentItem:nth-child(1) {
          border-top: 0px;
        }
        .contentItem {
          flex: 1;
          height: 100%;
          // padding:15px 8px;
          border-top: 1px solid #e9e9e9;
          display: flex;
          align-items: center;
          font-size: 14px;
          .icon {
            width: 48px;
            height: 48px;
            color: #fff;
            border-radius: 2px;
            background-color: #36cfc9ff;
            display: grid;
            place-items: center;
            font-weight: 600;
            font-size: 16px;
          }

          .text {
            margin-left: 24px;
            flex: 1;
            .textTitle {
              color: #000000a6;
              font-weight: 600;
            }

            p {
              color: #00000073;
            }
          }

          .date {
            margin-right: 58px;
            color: #00000073;
          }
        }
      }

      .foot {
        flex: 1;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
